define(['a1'],function(){
    class Zoom {
        constructor() {
            // 获取元素  
            this.smallBox = document.querySelector('.smallBox')
            this.mask = document.querySelector('.smallBox>span')
            this.bigBox = document.querySelector('.bigBox')
            this.pic = document.querySelector('.bigBox>img')
            this.init()
        }
        init() {
            this.over()
            this.out()
            this.move()
        }
        // 移入显示 mask 和bigbox
        over() {
            // console.log('sssss---->', this)
            // let that = this //  相当于把this 赋值给that 
            this.smallBox.onmouseover = () => {
                this.bigBox.style.display = 'block'
                this.mask.style.display = 'block'
            }
        }
        out() {
            this.smallBox.onmouseout = () => {
                this.bigBox.style.display = 'none'
                this.mask.style.display = 'none'
            }
        }
        move() {
            this.smallBox.onmousemove = (e) => {
                var e = e || window.event
                // 获取坐标
                let x = e.clientX - this.smallBox.parentElement.offsetLeft - this.mask.offsetWidth / 2
                let y = e.clientY - this.smallBox.parentElement.offsetTop - this.mask.offsetHeight / 2


                if (x <= 0) {
                    x = 0
                } else if (x >= this.smallBox.offsetWidth - this.mask.offsetWidth) {
                    x = this.smallBox.offsetWidth - this.mask.offsetWidth
                }
                if (y <= 0) {
                    y = 0
                } else if (y >= this.smallBox.offsetHeight - this.mask.offsetHeight) {
                    y = this.smallBox.offsetHeight - this.mask.offsetHeight
                }
                // mask 赋值
                this.mask.style.left = x + 'px'
                this.mask.style.top = y + 'px'
                // 计算比例
                let w = x / (this.smallBox.offsetWidth - this.mask.offsetWidth)
                let h = y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
                //给pic 赋值
                this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
                this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'

            }
        }

    }
    new Zoom()

});